<template>
  <div>
    <!-- Navbar -->
    <nav class="navbar">
      <div class="inner-width">
        <a href="javascript:void(0" class="logo"></a>
        <div class="title">
          <span>物联网创新实训平台</span>
        </div>
        <button class="menu-toggler">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <div class="navbar-menu">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Education</a>
          <a href="#">Works</a>
          <a href="#">Contact</a>
        </div>
      </div>
    </nav>

    <div class="container1">
      <swiper
        :pagination="{
          dynamicBullets: true,
        }"
        :loop="true"
        :autoplay="{ delay: 2000, disableOnInteraction: false }"
        :modules="modules"
      >
        <swiper-slide v-for="item in picList" :key="item">
          <img :src="item" />
        </swiper-slide>
      </swiper>
      <section id="home">
        <div class="inner-width">
          <div class="content">
            <h1>There is</h1>
            <div class="sm">
              <a href="#" class="fab fa-github"></a>
              <a href="#" class="fab fa-qq"></a>
              <a href="#" class="fab fa-weibo"></a>
              <a href="#" class="fab fa-weixin"></a>
              <a href="#" class="fab fa-youtube"></a>
            </div>
            <div class="buttons">
              <a href="Javascript:void(0)">更多</a>
              <span class="llogin" @click="DialogVisible = true">登录</span>
            </div>
          </div>
        </div>
        <div>
          <!-- 登录 -->
          <el-dialog v-model="DialogVisible" width="30%" draggable title="登录">
            <el-card>
              <el-form :model="userForm" ref="loginFormRef">
                <el-form-item
                  label="账号"
                  prop="tel"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合法账号',
                      trigger: 'blur',
                    },
                    {
                      min: 3,
                      max: 20,
                      message: '长度在3到20个字符',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <!-- 图标可以插入 -->
                  <el-input
                    v-model="userForm.tel"
                    placeholder="请输入账号或手机号"
                  />
                </el-form-item>
                <el-form-item
                  label="密码"
                  prop="password"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合法密码',
                      trigger: 'blur',
                    },
                    {
                      min: 3,
                      max: 20,
                      message: '长度在 3 到 20 个字符',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    type="password"
                    v-model="userForm.password"
                    placeholder="请输入密码"
                    @keyup.enter.native="login()"
                  />
                </el-form-item>
              </el-form>
              <div class="dialog-footer">
                <el-row>
                  <el-col :span="8">
                    <el-button text @click="forgetPassword()"
                      >忘记密码</el-button
                    ></el-col
                  >
                  <el-col :span="8">
                    <el-button type="info" round @click="goRegister()"
                      >注册</el-button
                    ><el-button type="primary" @click="login()" round
                      >登录</el-button
                    >
                  </el-col>
                  <el-col :span="8">
                    <el-dropdown @command="handleCommand">
                      <span class="el-dropdown-link">
                        其他登录方式<el-icon class="el-icon--right"
                          ><arrow-down
                        /></el-icon>
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item command="a"
                            >手机验证登录</el-dropdown-item
                          >
                          <!-- <el-dropdown-item command="b"
                          >邮箱验证登录</el-dropdown-item
                        > -->
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-dialog>
          <!-- 手机登录弹出框 -->
          <login-by-phone
            :diagVisable="childDiag1"
            @childsolt="callback1"
          ></login-by-phone>
          <!-- 邮箱验证登录 -->
          <login-by-email
            :diagVisable="childDiag2"
            @childsolt="callback2"
          ></login-by-email>
          <!-- 忘记密码 -->
          <forget-password
            :diagVisable="childDiag3"
            @childsolt="callback3"
          ></forget-password>
          <!-- 注册弹出框 -->
          <el-dialog
            title="注册"
            v-model="registerDialogVisible"
            width="40%"
            center
            @close="registerClose"
          >
            <div class="registerBox">
              <!-- 顶部过程条 -->
              <div class="re-header">
                <el-steps
                  :active="activeValue"
                  finish-status="success"
                  align-center
                >
                  <el-step title="协议须知" />
                  <el-step title="注册" />
                  <el-step title="完善信息" />
                </el-steps>
              </div>
              <div class="re-main">
                <div v-show="activeValue == '0'">
                  <p class="text" v-html="protocol"></p>
                </div>
                <div v-show="activeValue == '1'">
                  <el-form
                    ref="registerFormRef9"
                    :model="registerForm"
                    label-width="120px"
                    class="register"
                    :rules="registerRules"
                  >
                    <el-form-item
                      label="手机号"
                      class="registerItem"
                      prop="tel"
                    >
                      <el-input
                        class="reItem-input"
                        v-model="registerForm.tel"
                        type="text"
                        autocomplete="off"
                        clearable
                        size="large"
                        maxlength="11"
                        show-word-limit
                        @blur="bindPhoneInput(registerForm.tel)"
                      />
                    </el-form-item>
                    <el-form-item
                      label="邮箱号"
                      class="registerItem"
                      prop="email"
                    >
                      <el-input
                        class="reItem-input"
                        v-model="registerForm.email"
                        type="text"
                        autocomplete="off"
                        clearable
                        size="large"
                        @blur="bindPhoneInput(registerForm.tel)"
                      />
                    </el-form-item>
                    <el-form-item
                      label="验证码"
                      class="registerItem"
                      prop="captcha"
                    >
                      <el-input
                        class="reItem-input"
                        size="large"
                        v-model="registerForm.captcha"
                      />
                      <el-button
                        v-if="btnHidden"
                        class="qwe"
                        type="primary"
                        @click="getCaptcha"
                        :disabled="btnDisable"
                        >{{ btnValue }}</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
                <div v-show="activeValue == '2'">
                  <el-form
                    ref="passform"
                    :model="passform"
                    :rules="passrules"
                    label-width="80px"
                    class="passform"
                  >
                    <el-form-item label="密码" prop="password">
                      <el-input
                        v-model="passform.password"
                        type="password"
                        placeholder="请设置6~12位密码"
                      />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkpassword">
                      <el-input
                        v-model="passform.checkpassword"
                        id="inputValue"
                        type="password"
                        placeholder="请再次输入密码"
                      />
                    </el-form-item>
                    <el-form-item label="密码强度" class="strong">
                      <el-row style="height: 20px">
                        <div class="input_span">
                          <span id="one"></span>
                          <span id="two"></span>
                          <span id="three"></span>
                        </div>
                      </el-row>
                      <el-row style="height: 20px">
                        <span id="font">弱</span>
                        <span id="font">中</span>
                        <span id="font">强</span>
                      </el-row>
                    </el-form-item>
                  </el-form>
                </div>
                <!-- 中部每一条对应的内容 -->
              </div>
              <div class="re-footer">
                <!-- 底部对应着相应操作 -->
                <div class="bt-footer">
                  <el-button
                    v-if="activeValue > 0"
                    type="primary"
                    size="large"
                    @click="prev"
                    >上一步</el-button
                  >
                  <el-button
                    v-if="activeValue == ' 0'"
                    size="large"
                    type="primary"
                    @click="next"
                    >同意协议并注册</el-button
                  >
                  <el-button
                    v-if="activeValue == 1"
                    type="success"
                    size="large"
                    @click="register()"
                    >注册</el-button
                  >
                  <el-button
                    v-if="activeValue < steps - 1 && activeValue > 1"
                    type="success"
                    size="large"
                    @click="next"
                    >下一步</el-button
                  >
                  <el-button
                    v-if="activeValue == 2"
                    type="success"
                    size="large"
                    @click="submit"
                    >提交</el-button
                  >
                </div>
              </div>
            </div>
          </el-dialog>
          <!-- 验证滑块 -->
          <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
        </div>
      </section>
    </div>
    <div class="container">
      <!-- About -->
      <section id="about">
        <div class="inner-width">
          <h1 class="section-title">About</h1>
          <div class="about-content">
            <img src="../../assets/images/pic.png" alt="" class="about-pic" />
            <div class="about-text">
              <h2>Hi! 欢迎你加入我们</h2>
              <h3>
                <span>物联网</span>
                <span>创新实验</span>
                <span>师生同框</span>
              </h3>
              <p>
                物联网（Internet of
                Things，缩写：IoT[1]）是基于互联网、传统电信网等信息承载体，让所有能行使独立功能的普通物体实现互联互通的网络。其应用领域主要包括运输和物流、工业制造、健康医疗、智能环境（家庭、办公、工厂）等，具有十分广阔的市场前景
              </p>
            </div>
          </div>
          <div class="skills">
            <div class="skill">
              <div class="skill-info">
                <span>传感器技术</span>
                <span>90%</span>
              </div>
              <div class="skill-bar html"></div>
            </div>

            <div class="skill">
              <div class="skill-info">
                <span>RFID标签</span>
                <span>80%</span>
              </div>
              <div class="skill-bar css"></div>
            </div>

            <div class="skill">
              <div class="skill-info">
                <span>嵌入式系统</span>
                <span>70%</span>
              </div>
              <div class="skill-bar js"></div>
            </div>

            <div class="skill">
              <div class="skill-info">
                <span>M2M</span>
                <span>60%</span>
              </div>
              <div class="skill-bar php"></div>
            </div>

            <div class="skill">
              <div class="skill-info">
                <span>传感网</span>
                <span>90%</span>
              </div>
              <div class="skill-bar mysql"></div>
            </div>

            <div class="skill">
              <div class="skill-info">
                <span>两化融合</span>
                <span>80%</span>
              </div>
              <div class="skill-bar cs"></div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="container">
      <!-- Services -->
      <section id="services" class="dark wrap">
        <div class="inner-width">
          <h1 class="section-title">Services</h1>
          <div class="services">
            <div class="service">
              <i class="icon fas fa-paint-brush"></i>
              <h4>智能交通</h4>
              <p>
                以图像识别技术为核心，综合利用射频技术、标签等手段，对交通流量、驾驶违章、行驶路线、牌号信息、道路的占有率、驾驶速度等数据进行自动采集和实时传送，并利用识别能力与控制能力进行分析处理。
              </p>
            </div>

            <div class="service">
              <i class="icon fas fa-pager"></i>
              <h4>智能电力</h4>
              <p>
                节能与“智能电网”：从工业发电厂到公共城市街区，安装带有内置传感器和物联网功能的“智能”电表可以帮助我们更有效地监测和控制电力流动
              </p>
            </div>

            <div class="service">
              <i class="icon fas fa-database"></i>
              <h4>智慧物流</h4>
              <p>
                智慧物流是一种以信息技术为支撑，在物流的运输、仓储、包装、装卸搬运、流通加工、配送、信息服务等各个环节实现系统感知。全面分析，及时处理及自我调整功能，实现物流规整智慧、发现智慧、创新智慧和系统智慧的现代综合性物流系统。
              </p>
            </div>

            <div class="service">
              <i class="icon fab fa-android"></i>
              <h4>智能家庭</h4>
              <p>
                在家庭日常生活中，物联网的迅速发展使人能够在更加便捷、更加舒适的环境中生活。人们可以利用无线机制来操作大量电器的运行状态，还可实现迅速定位家庭成员位置等功能，因此，利用物联网可以对家庭生活进行控制和管理。
              </p>
            </div>

            <div class="service">
              <i class="icon fas fa-credit-card"></i>
              <h4>智能医疗</h4>
              <p>
                在医疗卫生领域中，物联网是通过传感器与移动设备来对生物的生理状态进行捕捉。如心跳频率、体力消耗、葡萄糖摄取、血压高低等生命指数。把它们记录到电子健康文件里面。方便个人或医生进行查阅。
              </p>
            </div>

            <div class="service">
              <i class="icon fas fa-keyboard"></i>
              <h4>智能农业</h4>
              <p>
                在农业领域，物联网的应用非常广泛，如地表温度检测、家禽的生活情形、农作物灌溉监视情况、土壤酸碱度变化、降水量、空气、风力、氮浓缩量、土壤的酸碱性和土地的湿度等，进行合理的科学估计，完善农业综合效益。
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>

    <el-footer>
      <common-footer></common-footer>
    </el-footer>
  </div>
</template>
<script>
import { reactive, ref, inject } from "vue";
import { mapMutations, useStore } from "vuex";
import {
  login,
  userRegister,
  sendSms,
  registerVerification,
  isRegister,
} from "../../api/user.js";
import { getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import Vcode from "vue3-puzzle-vcode";
import loginByPhone from "@/components/myComponent/loginComponent/loginByPhone.vue";
import loginByEmail from "@/components/myComponent/loginComponent/loginByEmail.vue";
import forgetPassword from "@/components/myComponent/forgetPassword/index.vue";
import CommonFooter from "@/components/Footer.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";

import { Pagination, Autoplay } from "swiper";
export default {
  components: {
    Vcode,
    loginByPhone,
    loginByEmail,
    forgetPassword,
    CommonFooter,
    Swiper,
    SwiperSlide,
  },
  setup() {
    const router = useRouter();
    const notice = inject("notice");
    const { proxy } = getCurrentInstance();
    const store = useStore(); // 使用useStore方法
    const isShow = ref(false);
    // 登录表单
    const userForm = reactive({
      tel: "",
      password: "",
    });
    const info = reactive({
      username: "",
      pic: "",
    });
    const onShow = () => {
      isShow.value = true;
    };
    const eraseForm = () => {
      userForm.tel = "";
      userForm.password = "";
    };
    const onClose = () => {
      isShow.value = false;
    };
    const soltLogin = (Form) => {
      login(Form).then((res) => {
        // 登录失败
        if (res.code != "200") {
          // 后面可以把登录失败后调用擦除表单数据函数
          userForm.tel = "";
          userForm.password = "";
          ElMessage({
            message: "账号或密码错误，登录失败",
            type: "error",
          });
        }
        // 登陆成功
        if (res.code == "200") {
          userForm.tel = "";
          userForm.password = "";
          let token = res.data.token;
          store.commit("setUserMessage", res.data.user);
          info.username = res.data.user.username;
          info.pic = res.data.user.picture;
          window.sessionStorage.setItem("token", token);
          if (res.data.user.role == "admin") {
            router.push({
              path: "/admin/userManage",
            });
          } else {
            router.push({
              path: "/space",
            });
          }
          ElMessage({
            message: "欢迎回来!",
            type: "success",
          });
        }
      });
    };
    const onSuccess = () => {
      onClose(); // 验证成功，需要手动关闭模态框
      //  成功之后还是需要对登录执行API操作
      soltLogin(userForm);
    };
    //注册
    const registerForm = reactive({
      tel: "", //手机号
      email: "",
      captcha: "", //验证码
    });
    const btnValue = ref("获取验证码");
    let btnHidden = ref(false);
    let btnDisable = ref(false);
    let totalTime = 60;
    let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/;
    let emailReg =
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    const bindPhoneInput = () => {
      if (registerForm.tel != "" && registerForm.email != "") {
        btnHidden.value = true;
        btnValue.value = "获取验证码";
      } else {
        btnHidden.value = false;
      }
    };
    const getCaptcha = () => {
      if (!phoneReg.test(registerForm.tel)) {
        ElMessage({
          showClose: true,
          message: "手机号码非法，请重新输入",
          type: "error",
        });
        return;
      }
      if (!emailReg.test(registerForm.email)) {
        ElMessage({
          showClose: true,
          message: "邮箱号码非法，请重新输入",
          type: "error",
        });
        return;
      }
      isRegister(registerForm.tel).then((res) => {
        if (res.code == 200) {
          if (!btnDisable) return;
          if (!res.data) {
            btnDisable.value = true;
            btnValue.value = totalTime + "s后重新发送";
            let clock = window.setInterval(() => {
              totalTime--;
              btnValue.value = totalTime + "s后重新发送";
              if (totalTime < 0) {
                window.clearInterval(clock);
                btnValue.value = "重新发送验证码";
                totalTime = 60;
                btnDisable.value = false;
              }
            }, 1000);
            sendSms(registerForm.tel).then((res1) => {
              if (res1.code == 200) {
                ElMessage({
                  type: "success",
                  message: "发送成功",
                });
              } else {
                ElMessage({
                  type: "info",
                  message: "发送失败",
                });
              }
            });
          } else {
            ElMessage({
              showClose: true,
              message: "手机号已经被注册！",
              type: "error",
            });
          }
        } else {
          ElMessage({
            showClose: true,
            message: "网络错误",
            type: "error",
          });
          return;
        }
      });
    };
    return {
      isShow,
      info,
      userForm,
      registerForm,
      btnHidden,
      btnValue,
      btnDisable,
      phoneReg,
      onShow,
      onClose,
      onSuccess,
      soltLogin,
      eraseForm,
      bindPhoneInput,
      getCaptcha,
      notice,
      modules: [Pagination, Autoplay],
    };
  },
  data() {
    // 验证手机的规则
    var checkMobile = (rule, value, callback) => {
      // 手机号正则表达式
      const regMobile =
        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (regMobile.test(value)) {
        // 合法的手机号
        return callback();
      }
      callback(new Error("请输入合法的手机号"));
    };
    var checkEmail = (rule, value, callback) => {
      const regEmail =
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if (regEmail.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法的邮箱号"));
    };

    return {
      picList: [
        "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/bg11.png",
        "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/bg21.png",
        "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/bg31.png",
      ],
      DialogVisible: false,
      registerDialogVisible: false,
      activeValue: 0,
      steps: 3,
      protocol: `<div class="detail_article">
                            <p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>尊敬的客户，欢迎您注册成为本网站用户。在注册前请您仔细阅读如下服务条款：</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本服务协议双方为本网站与本网站客户，本服务协议具有合同效力。您确认本服务协议后，本服务协议即在您和本网站之间产生法律效力。请您务必在注册之前认真阅读全部服务协议内容，如有任何疑问，可向本网站咨询。 无论您事实上是否在注册之前认真阅读了本服务协议，只要您点击协议正本下方的"注册"按钮并按照本网站注册程序成功注册为用户，您的行为仍然表示您同意并签署了本服务协议。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">协议细则</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>1、本网站服务条款的确认和接纳</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本网站各项服务的所有权和运作权归本网站拥有。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>2、用户必须：</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(1)自行配备上网的所需设备， 包括个人电脑、调制解调器或其他必备上网装置。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(2)自行负担个人上网所支付的与此服务有关的电话费用、 网络费用。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>3、用户在本网站平台上不得发布下列违法信息：</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(1)反对宪法所确定的基本原则的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(3)损害国家荣誉和利益的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(4)煽动民族仇恨、民族歧视，破坏民族团结的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(5)破坏国家宗教政策，宣扬邪教和封建迷信的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(6)散布谣言，扰乱社会秩序，破坏社会稳定的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(7)散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(8)侮辱或者诽谤他人，侵害他人合法权益的；</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(9)含有法律、行政法规禁止的其他内容的。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>4、有关个人资料</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">用户同意：</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(1)&nbsp;提供及时、详尽及准确的个人资料。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(2).&nbsp;同意接收来自本网站的信息。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(3)&nbsp;不断更新注册资料，符合及时、详尽准确的要求。所有原始键入的资料将引用为注册资料。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>5、电子邮件</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">用户在注册时应当选择稳定性及安全性相对较好的电子邮箱，并且同意接受并阅读本网站发往用户的各类电子邮件。如用户未及时从自己的电子邮箱接受电子邮件或因用户电子邮箱或用户电子邮件接收及阅读程序本身的问题使电子邮件无法正常接收或阅读的，只要本网站成功发送了电子邮件，应当视为用户已经接收到相关的电子邮件。电子邮件在发信服务器上所记录的发出时间视为送达时间。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>6、服务条款的修改</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本网站有权在必要时修改服务条款，本网站服务条款一旦发生变动，将会在重要页面上提示修改内容。如果不同意所改动的内容，用户可以主动取消获得的本网站信息服务。如果用户继续享用本网站信息服务，则视为接受服务条款的变动。本网站保留随时修改或中断服务而不需通知用户的权利。本网站行使修改或中断服务的权利，不需对用户或第三方负责。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>7、用户的帐号、密码和安全性</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">你一旦注册成功成为用户，你将得到一个密码和帐号。如果你不保管好自己的帐号和密码安全，将负全部责任。另外，每个用户都要对其帐户中的所有活动和事件负全责。你可随时根据指示改变你的密码，也可以结束旧的帐户重开一个新帐户。用户同意若发现任何非法使用用户帐号或安全漏洞的情况，请立即通知本网站。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>8、拒绝提供担保</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">用户明确同意信息服务的使用由用户个人承担风险。本网站不担保服务不会受中断，对服务的及时性，安全性，出错发生都不作担保，但会在能力范围内，避免出错。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>9、有限责任</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本网站对任何直接、间接、偶然、特殊及继起的损害不负责任，这些损害来自：不正当使用本网站服务，或用户传送的信息不符合规定等。这些行为都有可能导致本网站形象受损，所以本网站事先提出这种损害的可能性，同时会尽量避免这种损害的发生。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>10、信息的储存及限制</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本网站有判定用户的行为是否符合本网站服务条款的要求和精神的权利，如果用户违背本网站服务条款的规定，本网站有权中断其服务的帐号。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>11、用户管理</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">用户必须遵循：</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(1) 不使用信息服务作非法用途。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(2)&nbsp;不干扰或混乱网络服务。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(3)&nbsp;遵守所有使用服务的网络协议、规定、程序和惯例。用户的行为准则是以因特网法规，政策、程序和惯例为根据的。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>12、保障</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">用户同意保障和维护本网站全体成员的利益，负责支付由用户使用超出服务范围引起的律师费用，违反服务条款的损害补偿费用，其它人使用用户的电脑、帐号和其它知识产权的追索费。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>13、结束服务</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">用户或本网站可随时根据实际情况中断一项或多项服务。本网站不需对任何个人或第三方负责而随时中断服务。用户若反对任何服务条款的建议或对后来的条款修改有异议，或对本网站服务不满，用户可以行使如下权利：</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(1)&nbsp;不再使用本网站信息服务。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">(2)&nbsp;通知本网站停止对该用户的服务。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">结束用户服务后，用户使用本网站服务的权利马上中止。从那时起，用户没有权利、本网站也没有义务传送任何未处理的信息或未完成的服务给用户或第三方。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>14、通告</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">所有发给用户的通告都可通过重要页面的公告或电子邮件或常规的信件传送。服务条款的修改、服务变更、或其它重要事件的通告都会以此形式进行。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>15、信息内容的所有权</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本网站定义的信息内容包括：文字、软件、声音、相片、录象、图表；在广告中全部内容；本网站为用户提供的其它信息。所有这些内容受版权、商标、标签和其它财产所有权法律的保护。所以，用户只能在本网站和广告商授权下才能使用这些内容，而不能擅自复制、再造这些内容、或创造与内容有关的派生产品。</p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;"><strong>16、法律</strong></p><p style="white-space: normal; text-indent: 2em; line-height: 1.75em;">本网站信息服务条款要与中华人民共和国的法律解释一致。用户和本网站一致同意服从本网站所在地有管辖权的法院管辖。</p><p><br></p>
                 </div>`,
      msgText: "",
      passform: {
        password: "",
        checkpassword: "",
      },
      passrules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            max: 12,
            min: 6,
            message: "密码至少为6位，最多为12位",
            trigger: "blur",
          },
        ],
        checkpassword: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
        ],
      },
      childDiag1: false,
      childDiag2: false,
      childDiag3: false,
      registerRules: {
        tel: [
          {
            required: true,
            message: "Please input telephone number",
            trigger: "blur",
          },
          {
            validator: checkMobile,
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "Please input email number",
            trigger: "blur",
          },
          {
            validator: checkEmail,
            trigger: "blur",
          },
        ],
        captcha: [
          {
            required: true,
            message: "Please input captcha ",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    ...mapMutations({
      changeOffOnline: "changeOffOnline",
    }),
    quit() {
      ElMessage({
        type: "success",
        message: "拜拜",
      });
      window.sessionStorage.removeItem("token");
      window.sessionStorage.removeItem("store");
      this.changeOffOnline();
    },
    resetLogin() {
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return;
        this.DialogVisible = false;
        this.isShow = true;
      });
    },
    //开启注册
    goRegister() {
      this.DialogVisible = false;
      this.registerDialogVisible = true;
    },
    // 提交注册验证
    register() {
      //存在问题
      this.$refs.registerFormRef9.validate((valid) => {
        if (valid) {
          registerVerification(
            this.registerForm.tel,
            this.registerForm.captcha
          ).then((res) => {
            if (res.code == 200) {
              this.next();
            } else {
              ElMessage({
                type: "error",
                message: "验证码错误或已过期",
              });
            }
          });
        }
      });
    },
    prev() {
      this.activeValue--;
    },
    next() {
      this.activeValue++;
    },
    checkStrong(sValue) {
      var modes = 0;
      //正则表达式验证符合要求的
      if (sValue.length < 1) return modes;
      if (/\d/.test(sValue)) modes++; //数字
      if (/[a-z]/.test(sValue)) modes++; //小写
      if (/[A-Z]/.test(sValue)) modes++; //大写
      if (/\W/.test(sValue)) modes++; //特殊字符

      //逻辑处理
      switch (modes) {
        case 1:
          return 1;
          break;
        case 2:
          return 2;
          break;
        case 3:
        case 4:
          return sValue.length < 4 ? 3 : 4;
          break;
      }
      return modes;
    },
    isEqual() {
      if (this.passform.password === this.passform.checkpassword) return true;
      else return false;
    },
    submit() {
      this.$refs.passform.validate((valid) => {
        if (!valid) return;
        if (this.isEqual()) {
          let that = this;
          //设置成功 需要传递的参数 手机号+密码
          //自动登录
          let newUser = {
            academy: "",
            account: 0,
            birth: "",
            createTime: "",
            email: "",
            gender: "",
            id: "",
            identityId: "",
            integral: "",
            lastTime: "",
            password: "",
            picture: "",
            realName: "",
            role: "",
            school: "",
            tel: "",
            username: "",
          };
          newUser.tel = that.registerForm.tel;
          newUser.password = that.passform.password;
          newUser.email = that.registerForm.email;
          userRegister(newUser).then((res) => {
            if (res.code == 200) {
              ElMessage({
                type: "success",
                message: "注册成功",
              });
              that.userForm.tel = newUser.tel;
              that.userForm.password = newUser.password;
              that.soltLogin(that.userForm);
              that.notice(that);
            } else {
              ElMessage({
                type: "error",
                message: res.reason,
              });
            }
          });
          this.registerDialogVisible = false;
        } else {
          ElNotification({
            title: "错误提示",
            type: "warning",
            message: "两次输入密码不一致，请重新输入",
          });
        }
      });
    },
    personalInfor() {
      this.$router.push({
        path: "/space",
      });
    },
    // 注册完成后初始化表单信息
    registerClose() {
      this.$refs.passform.resetFields();
      this.registerForm.tel = "";
      this.registerForm.captcha = "";
      this.activeValue = 0;
    },
    //其他登录方式
    handleCommand(item) {
      this.DialogVisible = false;
      if (item == "a") {
        this.childDiag1 = true;
      } else if (item == "b") {
        this.childDiag2 = true;
      }
    },
    //忘记密码
    forgetPassword() {
      this.childDiag3 = true;
    },
    callback1() {
      this.childDiag1 = false;
    },
    callback2() {
      this.childDiag2 = false;
    },
    callback3() {
      this.childDiag3 = false;
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
* {
  /* margin: 0; */
  text-decoration: none;
  font-family: "Ubuntu", sans-serif;
  box-sizing: border-box;
}
.navbar {
  position: fixed;
  background-color: transparent;
  width: 100%;
  padding: 30px 0;
  top: 0;
  z-index: 999;
  transition: 0.3s linear;
}
.inner-width {
  max-width: 1300px;
  margin: auto;
  padding: 0 40px;
}

.navbar .inner-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  width: 44px;
  height: 32px;
  background-image: url("../../assets/images/white-logo.png");
  background-size: contain;
}

.menu-toggler {
  background: none;
  width: 30px;
  border: none;
  cursor: pointer;
  position: relative;
  outline: none;
  z-index: 999;
  display: none;
}

.menu-toggler span {
  display: block;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  position: relative;
  transition: 0.3s linear;
}

.navbar-menu a {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  margin-left: 30px;
  transition: 0.2s linear;
}
.title {
  width: 52%;
}
.title span {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  float: left;
  transition: 0.2s linear;
}
.navbar-menu a:hover {
  color: #48dbfb !important;
}

.sticky {
  background-color: #fff;
  padding: 18px 0;
}

.sticky .logo {
  background-image: url("../../assets/images/black-logo.png");
}

.sticky .navbar-menu a {
  color: #111;
}

.sticky .menu-toggler span {
  background-color: #111;
}
.container1 {
  position: relative;
}
.el-carousel .el-carousel__container {
  position: absolute !important;
}
#home {
  height: 100vh;
  min-height: 500px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
}
#home .inner-width {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#home .content {
  width: 100%;
  color: #fff;
}

#home .content h1 {
  font-size: 60px;
  margin-bottom: 60px;
}

#home .content h1::after {
  content: " Everything";
  animation: textanim 10s linear infinite;
}

@keyframes textanim {
  25% {
    content: " Internet of Things";
  }
  50% {
    content: " Smart Solutions";
  }
  75% {
    content: " Bright Future";
  }
}
.sm a {
  color: #fff;
  font-size: 22px;
  margin: 0 10px;
  transition: 0.2s linear;
}

.sm a:hover {
  color: #48dbfb;
}

#home .buttons {
  margin-top: 60px;
}

#home .buttons a,
.llogin {
  display: inline-block;
  margin: 15px 30px;
  color: #48dbfb;
  font-size: 15px;
  font-weight: 500;
  width: 180px;
  border: 1px solid #48dbfb;
  padding: 14px 0;
  border-radius: 6px;
  transition: 0.2s linear;
}
.llogin {
  cursor: pointer;
}
#home .buttons a:hover,
#home .buttons a:nth-child(2),
.llogin {
  background-color: #48dbfb;
  color: #fff;
}

section {
  padding: 100px 0;
  background-color: #f1f1f1;
}
.section-title {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  font-size: 26px;
  padding-bottom: 20px;
  color: #111;
}

.section-title::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 3px;
  background-color: #111;
  bottom: 0;
  left: calc(50% - 40px);
}

.section-title::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 10px;
  background-color: #48dbfb;
  border: 4px solid #f1f1f1;
  left: calc(50% - 12px);
  bottom: -7px;
}

.about-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.about-pic {
  width: 200px;
  border-radius: 50%;
  margin-right: 100px;
}

.about-text {
  flex: 1;
}

.about-text h3 {
  margin: 10px 0;
  color: #444;
  font-size: 16px;
}

.about-text h3 span:nth-child(1):after,
.about-text h3 span:nth-child(2):after {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #444;
  display: inline-block;
  border-radius: 50%;
  margin: 0 14px;
}

.about-text p {
  font-size: 17px;
  text-align: justify;
  line-height: 26px;
  margin-top: 20px;
}

.skills {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.skill {
  width: calc(50% - 20px);
  margin: 15px 0;
}

.skill-info {
  display: flex;
  justify-content: space-between;
}

.skill-bar {
  height: 3px;
  background-color: #ddd;
  margin-top: 14px;
  position: relative;
  left: 0;
}

.skill-bar::after {
  content: "";
  position: absolute;
  height: 6px;
  background-color: #48dbfb;
  bottom: 0;
  left: 0;
}

.html:after {
  width: 90%;
}

.css:after {
  width: 80%;
}

.js:after {
  width: 70%;
}

.php:after {
  width: 60%;
}

.mysql:after {
  width: 90%;
}

.cs:after {
  width: 80%;
}

section.dark {
  background-color: #353b48;
}

section.dark .section-title {
  color: #f1f1f1;
}

section.dark .section-title::before {
  background-color: #f1f1f1;
}

section.dark .section-title::after {
  border: 4px solid #353b48;
}

.services {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.service {
  width: calc(33% - 20px);
  text-align: center;
  border: 1px solid #48dbfb;
  border-radius: 6px;
  margin: 20px 0;
  padding: 40px 20px;
  color: #fff;
  cursor: pointer;
  transition: 0.3s linear;
}

.service .icon {
  color: #48dbfb;
  font-size: 40px;
  margin-bottom: 20px;
  transition: 0.3s linear;
}

.service h4 {
  font-size: 16px;
  margin-bottom: 6px;
}

.service:hover {
  background-color: #48dbfb;
}

.service:hover .icon {
  color: #fff;
}

@media screen and (max-width: 980px) {
  .menu-toggler {
    display: block;
  }

  .navbar-menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    background-color: #353b48;
    top: 0;
    right: -100%;
    max-width: 400px;
    padding: 80px 50px;
    transition: 0.3s linear;
  }

  .navbar-menu a {
    display: block;
    font-size: 30px;
    margin: 30px 0;
  }

  .sticky .navbar-menu {
    background-color: #f1f1f1;
  }

  .navbar-menu.active {
    right: 0;
  }

  .menu-toggler.active span:nth-child(1) {
    transform: rotate(-45deg);
    top: 4px;
  }

  .menu-toggler.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggler.active span:nth-child(3) {
    transform: rotate(45deg);
    bottom: 14px;
  }

  .inner-width {
    max-width: 800px;
  }

  .about-pic {
    margin: 0 auto 60px;
  }

  .about-text {
    flex: 100%;
    text-align: center;
  }

  .service {
    width: calc(50% - 20px);
  }
}

@media screen and (max-width: 600px) {
  .inner-width {
    padding: 0 20px;
  }

  .skill {
    width: 100%;
  }

  .service {
    width: 100%;
  }
}
@property --xPoint {
  syntax: "<length>";
  inherits: false;
  initial-value: 400px;
}
@property --yPoint {
  syntax: "<length>";
  inherits: false;
  initial-value: 300px;
}
@property --x2Point {
  syntax: "<length>";
  inherits: false;
  initial-value: 500px;
}
@property --y2Point {
  syntax: "<length>";
  inherits: false;
  initial-value: 300px;
}
body,
html {
  width: 100%;
  height: 100%;
  display: flex;
  background: #000;
}

.wrap {
  position: relative;
  margin: auto;
  background: conic-gradient(
      from -45deg at var(--xPoint) var(--yPoint),
      rgba(102, 255, 230, 0.7),
      transparent 50%,
      rgba(158, 190, 250, 0.5) 100%
    ),
    conic-gradient(
      from 180deg at var(--x2Point) var(--y2Point),
      rgba(102, 255, 230, 0.7),
      transparent 50%,
      rgba(158, 190, 250, 0.5) 100%
    ),
    linear-gradient(-45deg, #060d5e, #002268);
  -webkit-animation: pointMove 2.5s infinite alternate linear;
  animation: pointMove 2.5s infinite alternate linear;
  overflow: hidden;
}

.shadowTop {
  position: absolute;
  top: -300px;
  left: -330px;
  width: 430px;
  height: 300px;
  background: #fff;
  transform-origin: 100% 100%;
  transform: rotate(225deg);
  -webkit-clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
  clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
  box-shadow: 0px 0 0.5px #9cfcec, 0px 0 1px rgba(158, 250, 235, 0.95),
    0px 0 2px rgba(158, 250, 236, 0.95), 0px 0 3px rgba(158, 250, 236, 0.95),
    0px 0 4px rgba(167, 251, 238, 0.9), 0px 0 5px rgba(167, 251, 240, 0.9),
    0px 0 10px rgba(177, 251, 243, 0.9), 0px 0 20px rgba(187, 252, 245, 0.85),
    0px 0 40px rgba(187, 252, 246, 0.85), 0px 0 60px rgba(187, 252, 246, 0.85);
  -webkit-animation: scale 2.5s infinite alternate linear;
  animation: scale 2.5s infinite alternate linear;
  mix-blend-mode: hard-light;
}

.shadowBottom {
  position: absolute;
  top: 300px;
  left: 500px;
  width: 400px;
  height: 300px;
  background: #000;
  transform-origin: 0 100%;
  -webkit-clip-path: polygon(0 -100%, -200% -100%, -200% 200%, 0 200%);
  clip-path: polygon(0 -100%, -200% -100%, -200% 200%, 0 200%);
  box-shadow: 0px 0 0.5px #9cfcec, 0px 0 1px rgba(158, 250, 235, 0.95),
    0px 0 2px rgba(158, 250, 236, 0.95), 0px 0 3px rgba(158, 250, 236, 0.95),
    0px 0 4px rgba(167, 251, 238, 0.9), 0px 0 5px rgba(167, 251, 240, 0.9),
    0px 0 10px rgba(177, 251, 243, 0.9), 0px 0 20px rgba(187, 252, 245, 0.85),
    0px 0 40px rgba(187, 252, 246, 0.85), 0px 0 60px rgba(187, 252, 246, 0.85);
  -webkit-animation: scaleBottom 2.5s infinite -2.5s alternate linear;
  animation: scaleBottom 2.5s infinite -2.5s alternate linear;
  mix-blend-mode: hard-light;
}

@-webkit-keyframes scale {
  50%,
  100% {
    transform: rotate(225deg) scale(0);
  }
}

@keyframes scale {
  50%,
  100% {
    transform: rotate(225deg) scale(0);
  }
}
@-webkit-keyframes scaleBottom {
  50%,
  100% {
    transform: scale(0);
  }
}
@keyframes scaleBottom {
  50%,
  100% {
    transform: scale(0);
  }
}
@-webkit-keyframes pointMove {
  0% {
    --x2Point: 500px;
    --y2Point: 600px;
  }
  50% {
    --xPoint: 100px;
    --yPoint: 0;
    --x2Point: 500px;
    --y2Point: 600px;
  }
  100% {
    --xPoint: 100px;
    --yPoint: 0;
    --x2Point: 500px;
    --y2Point: 300px;
  }
}
@keyframes pointMove {
  0% {
    --x2Point: 500px;
    --y2Point: 600px;
  }
  50% {
    --xPoint: 100px;
    --yPoint: 0;
    --x2Point: 500px;
    --y2Point: 600px;
  }
  100% {
    --xPoint: 100px;
    --yPoint: 0;
    --x2Point: 500px;
    --y2Point: 300px;
  }
}
.header_main {
  width: 100%;
  height: 100%;
  top: 0;
  background: rgba(24, 34, 54, 0.8);
}
.el-row {
  width: 100%;
  height: 100%;
}
.el-col {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center;
}
.el-link {
  font-size: 25px;
  color: aliceblue;
}

.menu-content {
  display: flex;
  justify-content: center;
  align-content: center;
}
.menu-content > ul {
  color: aliceblue;
  cursor: pointer;
}
.el-dropdown-link {
  font-size: 16px;
  cursor: pointer;
  color: aliceblue;
}
.registerBox {
  min-height: 400px;
}

.re-main {
  height: 300px;
}
.text {
  display: block;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  border: 1px solid black;
  max-height: 250px;
  overflow-y: scroll;
}
.register {
  margin-top: 50px;
}
.registerItem {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #c0c0c0;
}
.reItem-input {
  width: 300px;
}
.qwe {
  margin-left: 20px;
  width: 100px;
}
.re-footer {
  position: relative;
  margin-left: 20px;

  height: 100px;
}
.bt-footer {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
}
.passform {
  margin-top: 50px;
}
.input_span {
  display: flex;
  border-radius: 50px;
  background: rgb(238, 238, 238);
}
#one {
  height: 20px;
  width: 120px;
}
#two {
  height: 20px;
  width: 120px;
}
#three {
  height: 20px;
  width: 120px;
}
#font {
  height: 18px;
  line-height: 18px;
  width: 120px;
  text-align: center;
}
a {
  cursor: pointer;
  text-decoration: none;
  color: #00c758;
  background-color: rgba(0, 0, 0, 0);
  transition: color 0.3s;
}
.u-pic {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}
.r-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-dropdown-link {
  cursor: pointer;
  color: rgb(18, 205, 230);
  display: flex;
  align-items: center;
  font-size: 12px;
}
.swiper {
   height: 100vh;
  width: 100%;
  position: absolute;
   z-index: -999;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>